<template>
    <div class="zhifuzj">
        <p>
            支付费用
            <span>￥{{ payPrice | filterPrice }}</span>
        </p>
        <p>
            可用余额
            <span>￥{{ balance }}</span>
        </p>
        
        <div class="zhifutit">
            <h3>支付方式：{{ zhifu[this.noactive].value }}</h3>
        </div>
        
        <div class="zhifulx">
            <div class="zhifu-box" v-for="(item,index) in zhifu" :key="item.id">
                <i :class="{'iconfont':true,'icon-weixinzhifu':true,'no-active':(noactive == index)}"></i>
                <input v-model="zhifuType" :value="item.value" :class="{'input-zhifu':true}" :checked='item.isChecked'  @click="check(index)" type="radio" style="-webkit-appearance: none;">
                {{item.label}}
            </div>
        </div>

        <a class="payEnter" @click="payEnter()">确认</a>
        <a class="payEnter" style="color: #FF5723; border: 1px solid; background-color: inherit;" @click="goBack">返回</a>

    </div>
</template>

<script>
export default {
    props:{
        balance:{
            type:Number,
            required:true,
            default(){
                return 0;
            }
        },
        payPrice:{
            type:Number,
            required:true,
            default(){
                return 0;
            }
        }
    },
    data(){
        return{
            noactive:0,
            zhifuType: '余额支付',
            zhifu:[
            {
                id: 0,
                label: '余额支付',
                value:'余额支付',
                isChecked: true
            },
            {
                id: 2,
                label: '微信支付',
                value:'微信支付',
                isChecked: false
            }
            ]
        }
    },
    computed:{
        payChannel(){
            if(this.noactive == 1){
                return 2;
            }
            if(this.noactive == 0){
                return 0;
            }
            return undefined;
        }
    },
    methods:{
        check (index) {            
            this.zhifu.forEach((item) => {
                item.isChecked = false
            })
            this.payType = this.zhifu[index].value
            this.zhifu[index].isChecked = true
            this.noactive = index;
        },
        payEnter(){
            // return '/repairSuccess'
            this.$emit("payEnter",{payChannel:this.payChannel,balance:this.balance})
        },
        goBack(){
            this.$emit('closePay');
        }
    },
    filters:{
        filterPrice(value){
            var toFixedNum = Number(value).toFixed(3);
            var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
            return realVal;
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/order.scss";
.zhifutit{
    width: 100%;
    h3{
        font:400 16px/2 '';
        padding-left:12px;
        padding-bottom: 8px;
    }
}
.zhifuzj{
    padding-top: 10px;
    >p{
        background: #fff;
        margin-bottom: 10px;
        font-size: 16px;
        color: #555;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        span{
            color: #f22;
            font-size: 16px;
        }
    }
}
.zhifulx{
    .zhifu-box{
        padding: 5px 0;
        margin-bottom: 10px;
    }
    .icon-weixinzhifu{
        color: #ccc;
        
    }
    .no-active.icon-weixinzhifu{
        color: #00C800;
    }
}
.payEnter{
    display: block;
    width: 90%;
    margin: 30px auto;
    background: #FF5723;
    color:#fff;
    padding: 10px 0;
    border-radius:5px;
    text-align: center;
    font-size: 16px;
}
</style>


